<template>
  <div class="page luckdraw-convert-coin">
    <div class="luckdraw-convert-coin-container">
      <div class="form-section">
        <m-input
          type="text"
          title="激活码"
          placeholder="请输入激活码"
          isLast
          v-model="activeCode">
        </m-input>
      </div>
      <div class="btn-section">
        <div class="btn-inner">
          <m-button text="兑换" type="red" @onClick="onConvertBtnClick"></m-button>
        </div>
      </div>
    </div>
    <m-toast v-model="toastContent"></m-toast>
  </div>
</template>

<script>
import MButton from 'comp/m-button'
import MInput from 'comp/m-input'
import MToast from 'comp/m-toast'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButton,
    MInput,
    MToast
  },
  data () {
    return {
      toastContent: '',
      activeCode: ''
    }
  },
  methods: {
    async onConvertBtnClick () {
      if (!this.checkForm()) {
        return
      }
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('activeCoinOrder', {
        playerid: openId,
        code: this.activeCode
      })
      // 创建成功
      wx.showModal({
        title: '提示',
        content: `已兑换得到${ret.result}个金币`,
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            wx.navigateBack()
          }
        }
      })
    },
    /**
     * 表单校验
     */
    checkForm () {
      if (!this.activeCode) {
        this.toastContent = '请输入激活码'
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-convert-coin {
  &-container {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }
  .btn-section {
    width: 100%;
    margin-top: 30rpx;
    .btn-inner {
      padding: 20rpx 20rpx;
    }
  }
}
</style>
